<template>
  <div style="width: 100%;">
    <div class="header" style="width: 100%;background-color: white">
      <el-page-header @back="goBack" content="收入合同"> </el-page-header>
      <el-divider></el-divider>
    </div>

    <div style="width: 90%;margin: 0 auto">
      <div style="width: 100%;">
        <span style="font-weight: 700;font-size: 20px">基本信息</span>
      </div>
      <el-divider></el-divider>
      <el-form style="width: 100%;" label-width="100px">
        <el-container>
          <el-col :span="6">
            <el-form-item label="签订日期: ">
              <el-input v-model="incomeForm.createDate" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同编号: ">
              <el-input v-model="incomeForm.id" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同名称: ">
              <el-input v-model="incomeForm.contractName"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="18">
            <el-form-item label="所属项目: ">
              <el-input v-model="incomeForm.projectName"
                ><i
                  slot="suffix"
                  @click="projectDialogVisible = true"
                  class="el-input__icon el-icon-search"
                ></i
              ></el-input>
              <el-input v-model="incomeForm.pid" v-show="false"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="合同类型: ">
              <el-select v-model="incomeForm.contractType" placeholder="请选择">
                <el-option label="总价合同" value="总价合同"> </el-option>
                <el-option label="单价合同" value="单价合同"> </el-option>
                <el-option label="成本加酬金合同" value="成本加酬金合同">
                </el-option>
                <el-option label="施工合同" value="施工合同"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始日期: ">
              <!-- <el-input v-model="incomeForm.startDate" type="date"></el-input> -->
              <el-date-picker
                v-model="incomeForm.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 182px"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束日期: ">
              <!-- <el-input v-model="incomeForm.endDate"></el-input> -->
              <el-date-picker
                v-model="incomeForm.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 182px"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同金额: ">
              <el-input
                v-model="incomeForm.contractAmount"
                @blur="handleAmount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="金额(大写): ">
              <el-input v-model="incomeForm.amountUpper"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="甲方单位: ">
              <el-input v-model="incomeForm.partyA"
                ><i
                  slot="suffix"
                  @click="companyDialogVisible = true"
                  class="el-input__icon el-icon-search"
                ></i
              ></el-input>
              <el-input v-model="incomeForm.custId" v-show="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="乙方单位: ">
              <el-input v-model="incomeForm.partyB"
                ><i
                  slot="suffix"
                  @click="companyDialogVisible2 = true"
                  class="el-input__icon el-icon-search"
                ></i
              ></el-input>
              <el-input
                v-model="incomeForm.secondPartyId"
                v-show="false"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签订人: ">
              <el-input v-model="incomeForm.contractSignatory"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="付款方式: ">
              <el-select v-model="incomeForm.paymentType" placeholder="请选择">
                <el-option label="按进度付款" value="按进度付款"> </el-option>
                <el-option label="按合同付款" value="按合同付款"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算方式: ">
              <el-select v-model="incomeForm.settleType" placeholder="请选择">
                <el-option label="按月结算" value="按月结算"> </el-option>
                <el-option label="分段结算" value="分段结算"> </el-option>
                <el-option label="目标结算" value="目标结算"> </el-option>
                <el-option label="竣工后一次结算" value="竣工后一次结算">
                </el-option>
                <el-option label="其他" value="其他"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预收款: ">
              <el-input v-model="incomeForm.advanceReceived"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保证金: ">
              <el-input v-model="incomeForm.depositAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="24">
            <el-form-item label="收款条件: ">
              <el-input
                v-model="incomeForm.receivedCondition"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="24">
            <el-form-item label="主要条款: ">
              <el-input
                v-model="incomeForm.mainTerm"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="24">
            <el-form-item label="备注: ">
              <el-input v-model="incomeForm.comment" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
      </el-form>
    </div>

    <multi-file-upload
      style="width: 90%;margin: 20px auto"
      title="附件"
      action="http://localhost/uploads"
      :params="{ folder: 'incomeForm' }"
      :headers="{ token: token }"
      :show-button="!checkRoute"
      @uploadSuccess="handleUploadSuccess"
      :parent-file-list="fileList"
    ></multi-file-upload>

    <div style="width: 90%;margin: 30px auto">
      <div style="width: 100%;">
        <div style="font-weight: 700;font-size: 20px;display: flex">
          <div>工程量清单</div>
          <div style="margin-left: 30px">
            <el-button
              v-if="!checkRoute"
              size="mini"
              type="primary"
              @click="handleAddRow"
              >增行</el-button
            >
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <el-table :data="incomeDetails">
        <el-table-column
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column label="清单子目" prop="name" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="工程量" prop="quantities" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.quantities"
              @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="综合单价" prop="unitPrice" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.unitPrice"
              @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="合价" prop="combinedPrice" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.combinedPrice"
              @change="handleEdit2(scope.$index, scope.row)"
              @blur="handleEdit2(scope.$index, scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="!checkRoute"
              type="danger"
              @click="handleRemoveRow(scope.row)"
              >删行</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <label for="" style="display: inline-block; width: 50px">合计: </label>
        <el-input style="width: 200px" v-model="input1"></el-input>
        <label
          for=""
          style="display: inline-block; width: 90px; margin-left: 30px; "
          >金额大写:
        </label>
        <el-input style="width: 350px" v-model="input2"></el-input>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="width: 100%;margin-left: 90px">
      <el-button type="primary" @click="handleSubmit" v-if="!checkRoute"
        >确认提交</el-button
      >
    </div>

    <el-dialog
      title="项目选择"
      :visible.sync="projectDialogVisible"
      width="70%"
    >
      <project-info-list
        @row="handleSetProject"
        v-if="projectDialogVisible"
      ></project-info-list>
    </el-dialog>

    <el-dialog
      title="甲方单位选择"
      :visible.sync="companyDialogVisible"
      width="70%"
    >
      <tender-company-list
        @row="handleSetCompany"
        v-if="companyDialogVisible"
      ></tender-company-list>
    </el-dialog>

    <el-dialog
      title="乙方单位选择"
      :visible.sync="companyDialogVisible2"
      width="70%"
    >
      <tender-company-list
        @row="handleSetCompany2"
        v-if="companyDialogVisible2"
      ></tender-company-list>
    </el-dialog>
  </div>
</template>

<script>
import { DateUtil } from "../../../model/common/DateUtil";
// import {UploadUtil} from "../../../model/common/UploadUtil";
import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
import { IncomeContractService } from "../../../model/sy/IncomeContractService.js";
import { HandleNumFormat } from "../../../model/sy/HandleNumFormat.js";
import { IncomeWorkAmountService } from "../../../model/sy/IncomeWorkAmountService.js";

const ProjectInfoList = () =>
  import("../../common/projectInfo/ProjectInfoList.vue");
const TenderCompanyList = () => import("./TenderCompanyList.vue");
const attachemenInfoService = AttachemenInfoService.getInstance();
const incomeContractService = IncomeContractService.getInstance();
const incomeWorkAmountService = IncomeWorkAmountService.getInstance();

export default {
  data() {
    return {
      progressFlag: false,
      progressPercent: 10,
      incomeForm: {
        id: "",
        createDate: DateUtil.today(),
        planEditor: sessionStorage.getItem("realName"),
      },
      projectDialogVisible: false,
      companyDialogVisible: false,
      companyDialogVisible2: false,
      fileList: [],
      incomeDetails: [],
      currentIndex: "",
      input1: "",
      input2: "",
    };
  },
  methods: {
    selectOne(id) {
      incomeContractService.selectOne(id).then((response) => {
        if (response.data.code === 0) {
          this.incomeForm = response.data.data;
        }
      });
    },
    selectList(id) {
      incomeWorkAmountService.selectList(id).then((response) => {
        if (response.data.code === 0) {
          this.incomeDetails = response.data.data;
        }
      });
    },
    handleEdit(index, row) {
      if (row.quantities && row.unitPrice) {
        row.combinedPrice = Number(row.quantities) * Number(row.unitPrice);
      }
    },
    handleEdit2() {
      // 循环给合计赋值
      console.log(this.incomeDetails);
      const val = this.incomeDetails.reduce(
        (prev, curr) => Number(prev) + Number(curr.combinedPrice),
        0
      );
      this.input1 = HandleNumFormat.numFormat(val);
      this.input2 = HandleNumFormat.handleAmountUpper(
        parseFloat(val).toFixed(2)
      );
    },
    handleAmount(value) {
      this.incomeForm.contractAmount = value.target.value;
      this.incomeForm.amountUpper = HandleNumFormat.handleAmountUpper(
        parseFloat(value.target.value).toFixed(2)
      );
    },
    getFileList(id) {
      attachemenInfoService.getById(id).then((response) => {
        if (response.data.code === 0) {
          response.data.data.forEach((item) => {
            this.fileList.push({
              fileName: item.fileName,
              uploadPerson: this.incomeForm.planEditor,
              uploadDate: item.uploadDate,
              filePath: item.filePath,
            });
          });
        }
      });
    },
    handleUploadSuccess(ids) {
      this.incomeForm.attachIds = ids;
    },
    getMaxId() {
      incomeContractService.getMaxId().then((response) => {
        if (response.data.code === 0) {
          this.incomeForm.id = response.data.data;
        }
      });
    },
    handleSetProject(row) {
      this.incomeForm.pid = row.id;
      this.incomeForm.projectName = row.projectName;
      this.projectDialogVisible = false;
    },
    handleSetCompany(row) {
      this.incomeForm.custId = row.id;
      this.incomeForm.partyA = row.companyName;
      this.companyDialogVisible = false;
    },
    handleSetCompany2(row) {
      this.incomeForm.secondPartyId = row.id;
      this.incomeForm.partyB = row.companyName;
      this.companyDialogVisible2 = false;
    },
    handleAddRow() {
      this.incomeDetails.push({
        name: "",
        unit: "",
        quantities: "",
        unitPrice: "",
        combinedPrice: "",
        remark: "",
        pid: this.incomeForm.id,
      });
    },
    handleSubmit() {
      incomeContractService
        .save(this.incomeForm, this.incomeDetails)
        .then((response) => {
          if (response.data.code === 0) {
            this.$message.success({
              message: "保存成功",
              duration: 1000,
            });
            this.$router.push({
              path: "/IncomeContractList",
            });
          }
        });
    },
    handleRemoveRow(row) {
      this.incomeDetails.splice(row.index, 1);
      this.handleEdit2();
    },
    goBack() {
      history.back();
    },
  },
  computed: {
    token: {
      get() {
        return this.$store.state.token;
      },
    },
    checkRoute() {
      return Object.keys(this.$route.params).length != 0;
    },
  },
  created() {
    if (Object.keys(this.$route.params).length == 0) {
      this.getMaxId();
    } else {
      const row = this.$route.params.row;
      this.selectOne(row.id);
      this.selectList(row.id);
      this.getFileList(row.attachemenIds);
      const timer = setInterval(() => {
        if (this.incomeDetails.length != 0) {
          this.handleEdit2();
          clearInterval(timer);
        }
      }, 20);
    }
  },
  components: {
    ProjectInfoList,
    TenderCompanyList,
  },
};
</script>

<style scoped>
/* .el-input__inner {
  width: 280px;
} */
.el-input__icon {
  cursor: pointer;
}
</style>
